<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        
        {{  2 | fil }}
        <!-- <ul>
            <li v-for="item in list">
                {{ item.sex === 0? '男': '女' }}
            </li>
        </ul> -->

        <!-- 过滤器的使用方式 -->
        <ul>
            <li v-for="item in list">
                <!-- {{  过滤的内容 | 过滤的方法 }}} -->
                {{ item.sex | filterSex | filters }}
            </li>
        </ul>

        <ul>
            <li v-for="item in users">
                <!-- {{  过滤的内容 | 过滤的方法 }}} -->
                {{ item.sex | filterSex }}
            </li>
        </ul>
    </div>


    <div id="app2">
        {{ 0 | fil }}
    </div>

    <script src="./vue.js"></script>
    <script>
        // Vue2中有  Vue3(methods)
        // 全局过滤
        // 局部过滤

        Vue.filter("fil", (val) => {
            return 111
        })

        new Vue({
            el: "#app",
            data: {
                list: [
                    {
                        sex: 0
                    },
                    {
                        sex: 1
                    },
                    {
                        sex: 0
                    }
                ],
                users: [
                    {
                        sex: 1
                    },
                    {
                        sex: 1
                    },
                    {
                        sex: 0
                    }
                ]
            },
            // 过滤器
            filters: {
                filterSex(val) {
                    // val  读取的是  |  前面的内容
                    return val === 0 ? '男' : '女'
                },
                filters(val) {
                    console.log(val)
                    return val === '男' ? 'GG' : 'MM'
                }
            }
        })

        new Vue({
            el: "#app2"
        })
    </script>
</body>

</html>